<style>

    .pic-container {
        position: relative;
        height: 100px;
        width: 100px;
    }

    .pic-input {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        height: 100%;
        width: 100%;
        z-index: 99;
        cursor: pointer;
    }

    .pic-img {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid #d2d2d2;
    }

    .pic-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column; /* 修改为垂直排列 */
        justify-content: center;
        align-items: center;
        color: white;
        z-index: 100;
        opacity: 0;
        transition: opacity 0.3s ease;
        font-size: 14px;
        font-weight: bold;
        pointer-events: none; /* 添加这一行，让鼠标事件穿透遮罩层 */
    }

    .pic-container:hover .pic-mask {
        opacity: 1;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <form class="layui-form layuimini-form" action="" lay-filter="edit-form" id="edit-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="tenantAccount" value="admin" class="layui-input" readonly disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">租户名称</label>
                <div class="layui-input-block">
                    <input type="text" name="tenantName" placeholder="请输入租户名称" class="layui-input" autocomplete="off"
                           lay-verify="required" lay-vertype="tips">
                    <tip>自定义名称，不超过64个字符。</tip>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <input type="hidden" name="tenantAvatar">
                    <div class="pic-container">
                        <input type="file" accept="image/*" id="pic-input" class="pic-input">
                        <img src="" alt="" id="pic-img" class="pic-img">
                        <div class="pic-mask">
                            <span><i class="layui-icon layui-icon-camera" style="font-size: 30px"></i></span>
                            <span>修改头像</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="number" name="tenantPhone" lay-reqtext="请输入正确的手机号" lay-verify="phone" lay-vertype="tips"
                           placeholder="请输入手机号"
                           class="layui-input" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">电子邮箱</label>
                <div class="layui-input-block">
                    <input type="email" name="tenantEmail" lay-reqtext="请输入正确的电子邮箱" lay-verify="required|email"
                           placeholder="请输入电子邮箱" lay-vertype="tips"
                           class="layui-input" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'miniPage', 'miniAjax'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer,
            miniAjax = layui.miniAjax,
            miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        miniAjax.get({
            url: '/auth/getTenantInfo',
            success: function (res) {
                if (res.code === 0) {
                    form.val('edit-form', res.data);
                    var tenantAvatarAddress = res.data.tenantAvatarAddress;
                    if (tenantAvatarAddress) {
                        $(".pic-img").attr('src', tenantAvatarAddress);
                    } else {
                        $(".pic-img").attr('src', '/images/photoIcon.png');
                    }
                } else {
                    layer.msg(res.msg, {time: 1000, icon: 2});
                }
            },
            error: function (error) {
                layer.msg(error, {time: 1000, icon: 2});
            }
        });

        $('#pic-input').change(function () {
            let formData = new FormData();
            let file = $("#pic-input")[0].files[0];
            let fileName = $("#pic-input")[0].files[0].name;

            // 创建FileReader对象
            let base64String = "";
            const reader = new FileReader();
            // 读取文件内容
            reader.onload = function(event) {
                // 读取完成后的回调函数
                base64String = event.target.result;
            };
            // 将文件以DataURL形式读入页面
            reader.readAsDataURL(file);

            formData.append("file", file);
            formData.append("fileName", fileName); // 文件名字
            let index = layer.load(0, {shade: 0.1}); // 0代表加载的风格，支持0-2

            miniAjax.upload({
                url: '/upload/put',
                data: formData,
                success: function (res) {
                    layer.close(index);
                    if (0 === res.code) {
                        $("input[name='tenantAvatar']").val(res.data.id);
                        $('#pic-img').attr('src',  base64String);
                    } else {
                        layer.msg(res.msg, {time: 1000, icon: 2});
                    }
                },
                error: function (error) {
                    layer.close(index);
                    layer.msg(error);
                }
            });
        });

        // 监听提交
        form.on('submit(saveBtn)', function (data) {
            layer.confirm('确定要修改租户信息吗', {
                title: '提示'
            }, function (index) {
                miniAjax.postJSON({
                    url: '/auth/editTenantInfo',
                    data: JSON.stringify(data.field),
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                layer.close(index);
                                miniPage.hashHome();
                            });
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    },
                    error: function (error) {
                        layer.msg(error, {time: 1000, icon: 2});
                    }
                });
            });
            return false;
        });

    });
</script>